<template>
  <div>
    <!--头部5张轮播底图-->
    <div class="header-lb">
        <img v-if="img==1" src="../../image/header-slideshow/lb01.jpg"/>
        <img v-else-if="img==2" src="../../image/header-slideshow/lb02.jpg"/>
        <img v-else-if="img==3" src="../../image/header-slideshow/lb03.jpg"/>
        <img v-else-if="img==4" src="../../image/header-slideshow/lb04.jpg"/>
        <img v-else-if="img==5" src="../../image/header-slideshow/lb05.jpg"/>
    </div>
    <!--头部轮播左侧点击按钮-->
    <div @click="leftlb" class="lb-left">
      <svg viewBox="0 0 18 18" role="presentation" aria-hidden="true" focusable="false" class="lb-left-svg">
        <path d="m13.7 16.29a1 1 0 1 1 -1.42 1.41l-8-8a1 1 0 0 1 0-1.41l8-8a1 1 0 1 1 1.42 1.41l-7.29 7.29z" fill-rule="evenodd"></path>
      </svg>
    </div>
    <!--头部轮播右侧点击按钮-->
    <div @click="rightlb" class="lb-right">
      <svg viewBox="0 0 18 18" role="presentation" aria-hidden="true" focusable="false" class="lb-right-svg">
    <path d="m4.29 1.71a1 1 0 1 1 1.42-1.41l8 8a1 1 0 0 1 0 1.41l-8 8a1 1 0 1 1 -1.42-1.41l7.29-7.29z" fill-rule="evenodd"></path>
    </svg>
    </div>
  </div>
</template>
<script>
	export default {
		data () {
			return {
        timer:"",
        img:1
			}
    },
    methods:{
      get(){
        this.img++;
         var add=parseInt(this.img);
     if(add>=5){
      this.img=1;
     }
      },
      leftlb(){
        if(this.img==this.img){
          clearInterval(this.timer);
         this.img--;
         var leftl=parseInt(this.img);
         if(leftl==0){
           this.img=5;
         }
          }
          this.timer=setInterval(this.get,3000);
        },
        rightlb(){
        if(this.img==this.img){
          clearInterval(this.timer);
         this.img++;
         var rightl=parseInt(this.img);
         if(rightl==6){
           this.img=1;
         }
          }
          this.timer=setInterval(this.get,3000);
        },
      
      },
 mounted(){
        this.timer=setInterval(this.get,3000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
    

	}
</script>
<style lang="css" scoped>
	* {
		margin: 0;
		padding: 0;
	}
  /*头部5张轮播底图css样式*/
  .header-lb{
   min-width: 744px;
   max-width: 1900px;
    height:529px;
    position:relative;
  }
  .header-lb img{
  height:100%;
    width:100%;
    transition: opacity 1s ;
    position: absolute;
    top:0;
    left:0;
  }
  /*头部轮播左侧点击按钮css样式*/
  .lb-left{
    position: absolute;
    left: 0px;
    top: 130px;
    cursor: pointer;
    padding: 24px;
  }
  .lb-left-svg{
    height: 1em; 
    width: 1em; 
    display: block; 
    fill: rgb(255, 255, 255);
  }
  /*头部轮播右侧点击按钮css样式*/
.lb-right-svg{
    height: 1em; 
    width: 1em; 
    display: block; 
    fill: rgb(255, 255, 255);
}
.lb-right{
    position: absolute;
    right: 0px;
    top: 130px;
    cursor: pointer;
    padding: 24px;
  }
 
</style>